<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>带按钮的轮播图</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            img{
                vertical-align: middle;
                width:400px;
            }
            .box{
                width:400px;
                position:relative;
            }
            li{
               list-style: none;
                width:20px;
                height:20px;
                line-height: 20px;
                border:1px solid #999;
                background-color:white;
                text-align: center;
                float:left;
                margin-right: 5px;
            }
            ul{
                width:400px;
                position:absolute;
                left:250px;
                bottom:2px;

            }
            a{
                text-decoration: none;
                color:#333;
            }
            a:hover{
                background-color:#ccc;
            }


        </style>
    </head>
    <body>
        <div class="box">
            <img src="images/1.jpg"/>
           <ul>
               <li><a href="#">1</a></li>
               <li><a href="#">2</a></li>
               <li><a href="#">3</a></li>
               <li><a href="#">4</a></li>
               <li><a href="#">5</a></li>
           </ul>
        </div>

    </body>
</html>